{{if address}}
<div class="address ui-box ui-c-f" i-tap="goto(#/selectAddress)">
    <div class="edit-address"></div>
    <h1>{{address.receiver_name}}</h1>

    <h2>{{address.phone}}</h2>

    <p>{{Pares_address(address.city)}} {{address.place}}</p>
</div>
{{else}}
<div class="ui-box">
    <div class="ui-bar ui-v-a" i-tap="goto(#/addAddress)">
        新增收货地址
        <div class="ui-more"></div>
    </div>
</div>
{{/if}}


{{if skus}}
<div class="ui-box">
    {{each skus}}
    <div class="product">

        <img src="{{$value.pic}}">

        <div class="tumb-top ui-c-f">
            <div class="thum-price">
                <div class="ui-price price-red">{{$value.price/10}}</div>
                {{if $value.price_cost}}
                <div class="ui-price price-gray">{{$value.price_cost/10}}</div>
                {{/if}}
            </div>
            <h1>
                {{$value.title}}
            </h1>
        </div>
        <div class="quantity">{{$value.quantity}}</div>

    </div>
    {{/each}}
</div>
{{/if}}

<div class="ui-box">
    <div class="ui-bar ui-v-a" i-tap="goto(#/selectCoupon)">
        优惠券
        <div class="float-right coupon">
            {{if coupon}}
            <div class="ui-more">{{coupon.title}}</div>
            {{else}}
            <div class="ui-more">无可用券</div>
            {{/if}}
        </div>
    </div>
</div>

<div class="ui-box">
    <div class="ui-bar ui-v-a">
        商品总价
        <div class="float-right">
            <div class="ui-price">{{amount/10}}</div>
        </div>
    </div>
    {{if postage.lack}}
    <div class="ui-bar ui-v-a">
        邮费<span class="lack">(还差<b>{{postage.lack/10}}元</b>包邮)</span>

        <div class="float-right">
            <div class="ui-price">{{postage.cost/10}}</div>
        </div>
    </div>
    {{else}}
    <div class="ui-bar ui-v-a">
        邮费<span class="lack"><b>(已包邮)</b></span>

        <div class="float-right">
            <div class="ui-price">{{postage.cost/10}}</div>
        </div>
    </div>
    {{/if}}
    <div class="ui-bar ui-v-a">
        为您节省
        <div class="float-right">
            <div class="ui-price">{{discount/10}}</div>
        </div>
    </div>
</div>

<div class="ui-box remark">
    <textarea placeholder="想给商家留点什么备注？(选填)" i-dom="remark"></textarea>
</div>

<div class="ui-page-holder">
</div>

<footer class="ui-c-f">
    {{if discount}}
    <div class="discount">
        已节省{{discount/10}}元
    </div>
    {{/if}}
    <button class="ui-btn-yellow ui-v-a un" i-dom="fbutton" i-tap="clickfb"><span>去结算</span></button>
    <div class="amountArea ui-v-a">
        <div>
            <div>合计
                <div class="ui-price price ui-v-a"><span i-dom="amount">{{allAmount/10}}</span></div>
            </div>
            {{if postage.lack}}
            <div class="free-remain" i-dom="freeRemain">
                还差<b>{{postage.lack/10}}元</b>包邮
            </div>
            {{else}}
            <div class="free-remain" i-dom="freeRemain">
                <b>已包邮</b>
            </div>
            {{/if}}
        </div>
    </div>
</footer>

<style>

    .address {
        height: 90px;
        padding: 0 8px;
    }

    .address h1 {
        display: inline-block;
        font-size: 16px;
        font-weight: lighter;
        padding: 8px 0;
    }

    .address h2 {
        display: inline-block;
        font-size: 12px;
        font-weight: lighter;
    }

    .address h2::after {
        content: '';
        display: block;
    }

    .address p {
        font-size: 12px;
        color: #888888;
        margin-right: 60px;
        max-height: 3em;
        line-height: 1.5em;
    }

    .address .edit-address {
        width: 60px;
        position: absolute;
        height: 90px;
        right: 0;
        background: url(img/ic_edit.png) no-repeat center;
        background-size: 18px;
    }

    .product {
        width: 100%;
        height: 100px;
        padding: 8px 0;
        border-bottom: solid 1px #f0f0f0;
    }

    .product:last-child {
        border-bottom: none;
    }

    .product h1 {
        font-size: 13px;
        font-weight: lighter;
        width: 210px;
        margin-top: 8px;
        margin-left: 8px;
        float: left;
    }

    .product > img {
        margin-left: 8px;
        display: block;
        float: left;
        width: 100px;
        height: 100px;
    }

    .tumb-top {
        height: 70px;
    }

    .thum-price {
        position: relative;
        float: right;
        margin-right: 8px;
        margin-top: 8px;
        text-align: right;
    }

    .price-red {
        color: #ff0000;
        font-size: 14px;
        font-weight: normal;
    }

    .price-gray {
        color: #888888;
        text-decoration: line-through;
        font-size: 11px;
    }

    .quantity {
        color: #888888;
        float: right;
        margin-right: 8px;
        font-size: 12px;
    }

    .quantity::before {
        content: 'x';
        display: inline-block;
    }

    .ui-bar {
        font-size: 14px;
        border-bottom: solid 1px #f0f0f0;
    }

    .ui-bar:last-child {
        border-bottom: none;
    }

    .float-right {
        height: 100%;
        float: right;
    }

    .coupon {
        color: #888888;
    }

    .lack {
        font-size: 12px;
    }

    .lack b {
        color: red;
        font-weight: normal;
    }

    .float-right .ui-price {
        color: red;
    }

    .remark {
        padding: 8px 16px;
    }

    .remark textarea {
        width: 100%;
        padding: 8px;
        right: 10px;
        border: solid 1px #f0f0f0;
        background: #fafafa;
        position: relative;
        height: 100px;
        display: block;
        resize: none;
    }

    footer .discount {
        line-height: 44px;
        padding: 0 8px;
        color: #f9e043;
        float: left;
        font-size: 12px;
    }

    footer .ui-btn-yellow {
        float: right;
        padding: 0;
        height: 34px;
        margin: 5px;
    }

    footer .amountArea {
        color: white;
        text-align: right;
        font-size: 12px;
        float: right;
        height: 100%;
    }

    footer .amountArea > div {
        display: inline-block;
        vertical-align: middle;
    }

    footer .ui-price {
        color: #f9e043;
        display: inline-block;
    }

    footer .free-remain {
        font-size: 10px;
        color: #888888;
        font-weight: normal;
    }

    footer .free-remain b {
        color: #f9e043;
        padding: 0 3px;
        font-weight: normal;
    }

    footer .ui-btn-yellow.un {
        background: #dddddd;
        color: #888888;
    }

</style>